<template>
  <div class="test-classify">
    <basic-container>
      <avue-crud
        :option="option"
        :data="data"
        :page.sync="page"
        @on-load="onLoad"
        v-model="item"
      >
        <template slot-scope="scope" slot="imageForm">
          <el-tag>{{ item.name ? item.name : "暂时没有内容" }}</el-tag>
        </template>
        <template slot-scope="{ disabled }" slot="imageLabel">
          <span>分类图片</span>
          <el-tooltip
            class="item"
            effect="dark"
            content="文字提示"
            placement="top-start"
          >
            <i class="el-icon-warning"></i>
          </el-tooltip>
          <el-input :disabled="disabled" v-model="item.name"></el-input>
        </template>
        <template slot-scope="{ error }" slot="imageError">
          <p style="color: green">自定义提示{{ error }}</p>
        </template>
      </avue-crud>
    </basic-container>
  </div>
</template>

<script>
export default {
  name: "TestClassify",
  data() {
    return {
      user: {},
      page: {
        pageSize: 20,
      },
      option: {
        excelBtn: false,
        border: true,
        index: false,
        expandLevel: 3,
        headerAlign: "left",
        align: "left",
        tree: false,
        labelWidth: 100,
        column: [
          {
            width: 130,
            label: "类型编码",
            prop: "name",
          },
          {
            label: "分类图片",
            prop: "image",
            // type: "icon",
            formslot: true,
            iconList: [
              {
                label: "基本图表",
                list: ["el-icon-time", "el-icon-bell", "el-icon-star-on"],
              },
            ],
          },
          {
            label: "分类名称",
            prop: "test",
          },
          {
            label: "链接地址",
            prop: "sex",
          },
        ],
        // group: [{
        //   label: '用户信息',
        //   prop: 'jbxx',
        //   icon: 'el-icon-edit-outline',
        //   column: [
        //     {
        //       label: '姓名',
        //       prop: 'name'
        //     },
        //     {
        //       label: '年龄',
        //       prop: 'age'
        //     }
        //   ]
        // }, {
        //   label: '其他信息',
        //   prop: 'jbxxs',
        //   icon: 'el-icon-edit-outline',
        //   column: [
        //     {
        //       label: '级别',
        //       prop: 'grade',
        //       type: 'select',
        //       dicData: [{
        //         label: '测试',
        //         value: 1
        //       }]
        //     },
        //     {
        //       label: '手机信息',
        //       prop: 'phone'
        //     },
        //     {
        //       label: '自定义图标',
        //       prop: 'icon',
        //       type: "icon",
        //       iconList: [{
        //         label: '基本图表',
        //         list: ['el-icon-time', 'el-icon-bell', 'el-icon-star-on']
        //       }]
        //     },
        //   ]
        // }]
      },
      data: [
        {
          id: "1",
          name: "张三",
          age: 14,
          grade: 1,
          phone1: "17547400800",
          phone: "17547400800",
          icon: "el-icon-time",
          test: 1,
          sex: "男",
        },
        {
          id: "4",
          name: "王五",
          age: 10,
          grade: 1,
          test: 1,
          sex: "女",
          icon: "el-icon-star-on",
          phone1: "17547400800",
          phone: "17547400800",
        },
      ],
    };
  },
  methods: {
    onLoad(page) {
      //模拟分页
      this.page.total = 40;
    },
  },
};
</script>

<style lang="scss" scoped>
.test-classify {
}
</style>